<template>
  <el-row type="flex">
    <div class="consultation-view-panel">
      <el-steps :active="consultation.status" process-status="wait" finish-status="success" simple>
        <el-step title="提交问题" ></el-step>
        <el-step title="等待回答" ></el-step>
        <el-step title="医生回答" ></el-step>
        <el-step title="问诊结束" ></el-step>
      </el-steps>
      <div class="consultation-question margin-top-20">
        <div class="time">
          <p class="main-color">提问于 {{consultation.created_at}}</p>
          <p>问题编号 {{consultation.id}}</p>
        </div>
        <div class="title">{{consultation.title}}</div>
        <div class="member-info margin-top-20 clearfix">
          <img class="float-left" :src="member.avatarImg ? member.avatarImg : 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3448484253,3685836170&fm=27&gp=0.jpg'" alt="">
          <div class="float-left">
            <p class="name"><i>{{member.name}}</i>　{{member.sex ? '巴巴' : '麻麻'}}</p>
            <p class="tag">
              <template v-for="(value, key, index) in consultation.consultationType">
                <el-tag :key="index" size="mini" class="margin-right-10">{{value}}</el-tag>
              </template>
            </p>
          </div>
        </div>
        <div class="desc margin-top-10">
          {{consultation.description}}
        </div>
        <div class="item-row" v-if="consultation.diseaseFileList.length">
          <p class="label">相关图片</p>
          <div class="margin-top-10">
            <ul class="img-list clearfix">
              <li v-for="item in consultation.diseaseFileList" :key="item.id">
                <img
                  :src="item.url"
                  alt=""
                  @click="picturePreview(item.url)">
              </li>
            </ul>
          </div>
        </div>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </div>
      <div class="consultation-answer">
        <div class="display-flex clearfix" style="height:400px">
          <span class="doctor-icon float-left">
            <img :src="doctor.avatarImg ? doctor.avatarImg : 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3448484253,3685836170&fm=27&gp=0.jpg'" alt="">
            <p class="name">{{doctor.name}}</p>
          </span>
          <div class="answer-desc float-left">
              <div class="answer-desc float-left">
                 <ul class="chatroom" >
                  <li class="message" v-for="m in messages">
                  <b>{{m.from}}</b>: {{m.body}}
                  <br />
                  <span>{{m.time}}</span>
                  </li>    
                </ul> 
              </div>
          </div>
        </div>
         <el-row v-if="consultation.status < 4" class="text-center margin-top-30">
          <el-button  size="small" @click="askedDialogVisible = true">回答追问</el-button>
        </el-row>
        <el-dialog title="追问" :visible.sync="askedDialogVisible" width="30%">              
                 <el-input
                    v-model="askedContent"
                    type="textarea"
                    :rows="6"
                    placeholder="请输入你想追问的问题">
                  </el-input>
                  <br />
                    <div slot="footer" class="dialog-footer">
                      <el-button @click="askedDialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="postAskedConsulation()">确 定</el-button>
                    </div>
        </el-dialog>
      </div>
      <div class="consultation-question margin-top-20">
        <div v-if="consultation.diseaseType.length" class="item-row">
          <el-tag v-for="(value, key, index) in consultation.diseaseType" :key="index" type="danger" size="small" class="margin-right-10">{{value}}</el-tag>
        </div>
      </div>
      <div v-if="consultation.status == 4" class="consultation-question margin-top-20">
        <div class="item-row">
          <p class="label">用户评价</p>
          <div class="margin-top-10">
            <el-rate
              v-model="consultation.score"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}">
            </el-rate>
          </div>
        </div>
        <div class="desc margin-top-10">
          {{consultation.comment}}
        </div>
      </div>
    </div>
    <PetInfo :petInfo="pet" :consultationInfo="consultation"/>
  </el-row>
  
</template>

<script>
import PetInfo from "@/components/pet/Info.vue";

export default {
  data() {
    return {
      consultation: {
        diseaseFileList: [],
        diseaseType: [],
        diseaseInfo: {},
        chat_content: [],
        state: 0
      },
      member: {},
      pet: {},
      doctor: {
        avatarImg: "",
        name: ""
      },
      dialogImageUrl: "",
      dialogVisible: false,
      messages: [],
      askedDialogVisible: false,
      askedContent: ""
    };
  },
  components: {
    PetInfo
  },
  mounted() {
    this.getConsultationInfoData();
    this.doctor.avatarImg = this.$store.state.doctorInfo.avatarImg;
    this.doctor.name = this.$store.state.doctorInfo.name;
  },
  methods: {
    getConsultationInfoData() {
      let consultationId = this.$route.params.consultationId;
      this.axios
        .get("/doctor/consultations/" + consultationId)
        .then(response => {
          if (response.data.code == 200) {
            this.consultation = response.data.data.consultation;
            this.member = response.data.data.member;
            this.pet = response.data.data.pet;
            this.resetMessageFormatToShow(this.consultation.chat_content);
          } else {
            this.$message({
              message: response.data.msg,
              type: "error"
            });
          }
        });
    },
    picturePreview(url) {
      this.dialogImageUrl = url;
      this.dialogVisible = true;
    },
    postAskedConsulation() {
      this.askedDialogVisible = false;
      let consultationId = this.$route.params.consultationId;
      let postMessage = this.resetMessageFormatForPost(this.askedContent);

      this.axios
        .patch("/doctor/consultations/" + consultationId + "/reply", {
          diseaseType: this.consultation.diseaseType,
          chatContent: JSON.stringify(postMessage)
        })
        .then(response => {
          if (response.data.code == 200) {
            this.$message({
              message: response.data.msg,
              type: "success"
            });
            this.$router.replace({ name: "MyAnswerList" });
            return;
          } else {
            this.$message({
              message: response.data.msg,
              type: "error"
            });
            return;
          }
        });
    },
    resetMessageFormatForPost(newChatContent) {
      let checkOriginChatMessage = () => {
        let chatContentLength = JSON.parse(this.consultation.chat_content)
          .length;
        if (chatContentLength > 0)
          return JSON.parse(this.consultation.chat_content);
        else return [];
      };
      let originChatMessage = Array.from(checkOriginChatMessage());
      var localDate = new Date();
      var postTime = localDate.toLocaleString();
      var tempNewChatContent = { doctor: newChatContent, time: postTime };
      originChatMessage.push(tempNewChatContent);
      var postMessage = originChatMessage;
      return postMessage;
    },
    resetMessageFormatToShow(messages) {
      var messagesArray = JSON.parse(messages);
      var newMessage = [];
      var tempKeyObject = {};
      var tempValueObject = {};
      for (var i = 0; i < messagesArray.length; i++) {
        var shopKey = Object.keys(messagesArray[i]).indexOf("shop");
        if (shopKey >= 0) {
          tempKeyObject = {
            from: "商店",
            body: messagesArray[i].shop,
            time: messagesArray[i].time
          };
        } else {
          tempKeyObject = {
            from: "医生",
            body: messagesArray[i].doctor,
            time: messagesArray[i].time
          };
        }
        newMessage.push(tempKeyObject);
      }
      this.messages = newMessage.reverse();
    }
  }
};
</script>
